<template>
  <div class="user_right fl ml20" v-loading='islogin'>
    <div class="import_top">
      <div>
        <span>选择商铺:</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div>
        <span>上传文件:</span>
        <a href="javascript:;" class="file">
          点击上传
          <input id="up" ref="file" type="file" class="file-btn" @change="inputCustomProduct" />
        </a>
        <span v-show="inpName">{{inpName}}</span>
        <!-- <button>确定</button> -->
      </div>
      <div>
        <a
          href="./批量导入表格模板.xlsx"
          download
        >Excel标准模板下载</a>
      </div>
    </div>
    <div class="import_instructions">
      <p>说明:</p>
      <p>
        1.导入商品前,请先点击“
        <span>EXCEL标准模板</span>”进行下载；
      </p>
      <p>2.打开EXCEL后,请仔细阅读模板内的注意事项；</p>
      <p>3.按规则填写商品信息,检查无误后,保存EXCEL文档；</p>
      <p>4.点击“选择”按钮,选择整理好的EXCEL文档,进行提交。</p>
      <div>
        <img src="../../../assets/img/excelDemo.png" alt />
      </div>
    </div>
  </div>
</template>

<script>
import { uploadExcel,ovistoreList } from "@/api/business";
export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "商铺"
        },
      ],
      value: "",
      inpName: "",
      islogin:false,
    };
  },
  created() {
    this.getstoreList();
  },
  methods: {
    async inputCustomProduct(e) {
      if(!this.value){
        this.$message("请选择店铺");
        return;
      }
      //声明一个FormDate对象
      this.islogin = true;
      let formData = new FormData();
      let file = e.target.files[0];
      //把文件信息放入对象中
      formData.append("excel", file);
      // let params = new URLSearchParams(formData)     //当请求没有转换成formData时使用
      if (
        file.type == "application/vnd.ms-excel" ||
        file.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      ) {
        let excels = await uploadExcel(formData)
          .then(e =>
            this.$message({
              message: "上传成功",
              type: "success"
            }),
            this.islogin = false,
          )
          .catch(e =>
            this.$message({
              message: "上传失败",
              type: "error"
            })
          );
      } else {
        this.$message({
          message: "请选择excel文件！",
          type: "error"
        });
      }
      //此处必须将控制导入的input值进行置空，否则不会触发change事件，会导致同一个文件不能二次导入
      document.getElementById("up").value = null;
    },
    dowexcel() {},

    // 店铺列表
    async getstoreList(){
      this.options = await ovistoreList();
    }
  }
};
</script>

<style lang="scss" scope>
.import_top {
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.import_top {
  margin-top: 23px;
  position: relative;
  > div {
    display: flex;
    align-items: center;
    &:nth-child(1) {
      font-size: 18px;
      color: #333;
      > span {
        margin-right: 10px;
      }
      .el-select {
        width: 120px;
      }
    }
    &:nth-child(2) {
      font-size: 18px;
      margin-left: 54px;
      color: #333;
      input {
        font-size: 16px;
      }
      > span {
        &:nth-child(2) {
          font-size: 16px;
          color: #999;
        }
        &:nth-child(1) {
          margin-right: 10px;
        }
      }
      > button {
        margin-left: 22px;
        width: 80px;
        height: 27px;
        border: 0;
        background: #4448f8;
        border-radius: 3px;
        color: #fff;
        &:active {
          background: #3537b1;
        }
      }
    }
    &:nth-child(3) {
      width: 150px;
      height: 27px;
      border-radius: 3px;
      font-size: 14px;
      color: #666;
      border: 1px solid rgb(179, 170, 170);
      display: flex;
      justify-content: center;
      position: absolute;
      right: 26px;
      cursor: pointer;
    }
  }
}
.import_instructions {
  margin-top: 24px;
  padding: 0 22px;
  > p {
    margin-bottom: 24px;
    font-size: 16px;
    &:nth-child(1) {
      color: #ff0000;
    }
    &:nth-child(2) {
      > span {
        color: #115fff;
        text-decoration: underline;
      }
    }
  }
}
.file {
  position: relative;
  display: inline-block;
  background: #4448f8;
  border-radius: 3px;
  padding: 4px 12px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}
.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  background: #777acc9d;
  border-color: #777acc9d;
  color: #fff;
}
</style>